<template>
	<view>
		<u-sticky>
			<u-button type="primary" size="small" :plain="true" @click="toAdd">{{clickAddButtonText}}</u-button>
			<u-button v-if="isAdd" type="success" :plain="true" @click="save">保存连接</u-button>
			<u-button v-if="isShow && (userinfo.Id == CreatorId || userinfo.Roles.indexOf('管理员角色')>-1)" type="error" :plain="true" @click="del">删除连接</u-button>
		</u-sticky>
		<u-form><u-form-item label="类型:"  v-if="isAdd || isShow"  @click="clickType"><u-input v-model="connectType" :disabled="true"></u-input></u-form-item> </u-form>
		<view v-if="isAdd || isShow">
			<text>备注</text>
			<u-textarea :disabled="!isAdd" v-model="remark"  v-if="textShow"></u-textarea>
		</view>
		<tables :equid='firstEqu' @clickTable="clickTable" :isInsert="isAdd"  @loadTable="loadTable" ref="first" :type1="firstType"></tables>
		<tables :equid='secondEqu' @clickTable="clickSecondTable" v-if="isAdd || isShow" :isOhter="true" :isInsert="isAdd" :p2="secondp2" :p2s="secondp2s"  :fiberid="secondFiber" :type2="secondType" :ForB2="secondForB" ref="second"></tables>
		<u-picker :show="pickerShow" :columns="columns" @cancel="pickerShow=false" @confirm="pickChange"></u-picker>
		<u-popup :show="connectShow" @close="connectShow = false" :closeable='true' :round="20" mode="bottom" :overlay="false" :safeAreaInsetTop="true">
			<u-collapse :value="['1']" >
				<u-collapse-item title="设备" name="1">
					<u-list height='200px'>
						<u-list-item v-for="(item, index) in equList" :key="index" style="margin-top:5px;">
							<u-cell :title='item.Name' @click="gotoAdd(item)"
								:label="'类型:'+(item.Type ? item.Type : '')">
							</u-cell>
						</u-list-item>
					</u-list>
				</u-collapse-item>
				<u-collapse-item title="缆线" name="1">
					<u-list height='190px'>
						<u-list-item v-for="(item, index) in fiberList" :key="index" style="margin-top:5px;">
							<u-cell :title='item.Name' @click="gotoAdd(item)"
								:label="'类型:'+(item.Ftype ? item.Ftype : '')+' 创建者:'+(item.Creator ? item.Creator.Name : '') + ' 芯数:'+(item.Num ? item.Num : '' )">
							</u-cell>
						</u-list-item>
					</u-list>
				</u-collapse-item>
			</u-collapse>
		</u-popup>
	</view>
</template>

<script>
	import tables from "@/pages/index/Protect/c_table.vue"
	import {
		GetEquByNode,
		AddLineConnect,
		getlineequlist,
		DeleteConnect
	} from '@/common/api.js'
	export default {
		components: {
		  tables,
		},
		computed: {
			clickAddButtonText() {
			  return this.isAdd ? '关闭连接对象' : '添加连接对象'
			},
		},
		data(){
			return{
				isAdd: false, //是否添加模式
				connectShow: false,
				pickerShow: false,
				equList: [], // 可连接的设备列表
				fiberList: [], //可连接的缆线列表
				nodeid: '', //节点id
				userinfo: {},
				firstEqu: '', //第一个设备的id
				secondEqu: '', //第二个设备的id
				secondFiber: '', //第二个缆线的id
				firstTablePoints: [] ,//第一个设备选择的数组
				secondTablePoints: [], //第二个设备选择的数组
				firstForB: '', //第一个设备的前后
				secondForB: '', //第二个设备的前后
				firstType: '', //第一个设备的类型
				secondType: '', //第二个设备的类型
				connectType: '',//类型
				columns: [['方孔', '圆孔', '直熔']],
				isShow: false, //是否展示模式
				secondp2: [], //第二个设备对应选中的数组
				secondp2s: [], //第二个设备对应整条的数组
				remark: '',//备注
				needInput: false,//第二个表格是否需要输入框
				CreatorId: '',//点击格的创建者
				firstp1: '', //第一个表格的选中
				textShow: true
			}
		},
		methods:{
			clickTable(equId,ForB,arr,type){ //
				// this.firstEqu = equId
				this.firstForB = ForB
				this.firstTablePoints = arr
				this.firstType = type
			},
			loadTable(res){// 获取第一个表格中取得的数据，存入第二个表格中
					this.needInput = false
					this.remark = res.remark1
					this.secondEqu = res.equid2
					this.secondForB = res.ForB2
					this.secondp2 = []
					this.secondp2.push(res.p2)
					this.secondp2s = res.p2s
					this.secondType = res.type2
					this.connectType = res.ConnectType
					this.CreatorId = res.CreatorId
					this.firstForB = res.ForB1
					this.firstp1 = res.p1
					if(!res.equid2){
						this.isShow  = false
					}else{
						this.isShow = true
					}	
			},
			gotoAdd(item){
				// if(item.Type!= '')
				this.isAdd = true
				this.needInput = false
				this.secondEqu = item.Id
				if(item.Ftype){
					this.secondEqu = item.Id
					this.secondType = '缆线'
				}else{
					this.secondType = item.Type
				}
				// else if(item.Type != 'ODF架'){
				// 	this.needInput = true
				// }
				this.connectShow = false
				this.secondp2 = []
				this.secondp2s = []
			},
			clickSecondTable(equId,ForB,arr,type){ //从第二个表格获取的需要添加的数据
				this.secondEqu = equId
				this.secondForB = ForB
				this.secondTablePoints = arr
				if(type){
					this.secondType = type
				}else{
					this.secondType = '缆线'
				}
			},
			toAdd(){ //判断是否添加模式,改变模式 取消时清空第二个表格的所有信息
				if(!this.isAdd){
					this.connectShow = true
					this.isShow = false
					this.remark = ''
					this.connectType = ''
				}else{
					this.isAdd = false
					this.secondEqu = ''
					this.secondForB = ''
					this.secondTablePoints = []
					this.remark = ''
					this.connectType = ''
					this.textShow = false
					this.textShow = true
					this.$refs.first.clearSelection();
					this.$refs.first.getUsed();
				}
			},
			save(){
				if(!this.firstEqu || !this.firstForB || !this.firstTablePoints){
					uni.showToast({
					  title: '请将设备一选择完整！',
					  icon: 'error',
					  duration: 2000
					})
				}else if(!this.secondEqu || !this.secondForB || !this.secondTablePoints){
					uni.showToast({
					  title: '请将设备二选择完整！',
					  icon: 'error',
					  duration: 2000
					})
				}else if(!this.connectType){
					uni.showToast({
					  title: '请将选择类型！',
					  icon: 'error',
					  duration: 2000
					})
				}else{
					if(this.firstEqu == this.secondEqu && this.firstForB==this.secondForB){
						let i1 = this.firstTablePoints[0]
						let i2 = this.firstTablePoints[1]
						let j1 = this.secondTablePoints[0]
						let j2 = this.secondTablePoints[1]
						if ((i1 <= j1 && i2 >= j1)| (j1 <= i1 &&j2 >= i1)){
							uni.showToast({
								title: '选择区间存在交叉，请检查！',
								icon: 'error',
								duration: 2000
							})
							return 
						}		
					}
					let datas = {
						EquId1: this.firstEqu,
						Point1: this.firstTablePoints.join(','),
						Type1: this.firstType,
						ForB1: this.firstForB,
						EquId2: this.secondEqu,
						Point2: this.secondTablePoints.join(','),
						Type2: this.secondType,
						ForB2: this.secondForB,
						ConnectType: this.connectType,
						Remark: this.remark
					}
					// console.log(datas)
					AddLineConnect(datas).then(res =>{
						this.$refs.first.clearSelection();
						this.$refs.first.equUpdata();
						this.$refs.second.equUpdata();
						this.isAdd = false
						this.secondEqu = ''
						this.secondForB = ''
						this.secondTablePoints = []
						this.connectType = ''
						// this.$refs.textarea.value = ''
						this.remark = ''
						this.textShow = false
						this.textShow = true
						uni.showToast({
						  title: '成功',
						  icon: 'success',
						  duration: 2000
						})
						this.$refs.first.getUsed();
					})
				}
			},
			pickChange(e){
				this.connectType = e.value[0]
				this.pickerShow = false
			},
			async getequ(id) {
				let para = {
					Parameters: [],
				}
				para.Parameters.push({
					FieldName: "Id",
					ConditionalType: "Equal",
					FieldValue: id
				})
				await getlineequlist(para).then(res => {
					return res.data[0]	
				})
			},
			clickType(){
				if(this.isAdd){
					this.pickerShow = true
				}
			},
			del(){
				let points = this.firstp1 + ',' + this.firstp1
				DeleteConnect(this.firstEqu, points, this.firstForB).then(res=>{
					this.isAdd = false
					this.secondEqu = ''
					this.secondForB = ''
					this.secondTablePoints = []
					this.connectType = ''
					this.$refs.first.clearSelection();
					if(res == true){
						uni.showToast({
						  title: '删除成功',
						  icon: 'success',
						  duration: 2000
						})
					}
					this.$refs.first.getUsed();
				})
				
			},
		},
		onLoad(option){
			this.nodeid = option.nodeId
			this.firstEqu = option.equId
			this.firstType = option.equType
			// this.nodeid = '73f528aa-01da-2247-e309-797b247470c8' //测试
			this.userinfo = JSON.parse(uni.getStorageSync("$userinfo"))
			GetEquByNode(this.nodeid).then(res => {
				this.equList = res.equs
				this.fiberList = res.fibers
			})
		}
	}
</script>

<style>

</style>
